.el-radio {
  .el-radio__inner {
    &:after {
      width: 6px;
      height: 6px;
    }
  }
  .el-radio__label {
    color: @color-normal;
    font-weight: 400;
    padding-left: 6px;
  }
  &.is-checked {
    .el-radio__label {
      color: @color-normal;
    }
    .el-radio__inner {
      background: #fff;
      &:after {
        background: @color-primary;
      }
    }
  }
  &.is-disabled,
  &.is-checked.is-disabled {
    .el-radio__inner {
      &,
      &:hover,
      &:active {
        background: @form-disabled-bg-color;
        border-color: #e5e5e5;
      }
      &:after {
        background-color: #e5e5e5;
      }
    }
  }
  .el-radio__input {
    &.is-disabled {
      & + span {
        &.el-radio__label {
          color: @color-sup;
        }
      }
    }
  }
}

.radio-color-mixins(@color) {
  border: 1px solid fade(@color, 10%);
  background: fade(@color, 10%);
  .el-radio__label {
    color: fade(@color, 70%);
  }
  &:hover,
  &.is-checked {
    border-color: @color;
    .el-radio__label {
      color: @color;
    }
  }
  &.is-checked:before {
    border-color: @color @color transparent transparent;
  }
}

.el-radio-group {
  // 卡片模式
  &[type="card"] {
    .el-radio {
      display: inline-block;
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      .radio-color-mixins(@color-primary);
      &[color="orange"] {
        .radio-color-mixins(#ff8851);
      }
      &[color="grape"] {
        .radio-color-mixins(#7ca3ff);
      }
      &[color="pink"] {
        .radio-color-mixins(#ff5463);
      }
      &__label {
        display: inline-block;
        padding-left: 0;
        font-size: @font-content;
        .iconfont-handle {
          margin-right: 5px;
        }
      }
      &.is-checked {
        &:before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          border-width: 12px;
          border-style: solid;
        }
        &:after {
          content: "\e610";
          font-family: "handle" !important;
          position: absolute;
          top: -12px;
          right: 2px;
          color: #fff;
          font-size: @font-small;
        }
      }

      &__input {
        display: none;
      }
      .iconfont-handle {
        font-size: @font-content;
      }
    }
  }
}
